<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSC Banking System</title>
<link rel="stylesheet" href="css/style_home.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" href="css/screen.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui-min.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />

<!-- SCRIPT -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery/jquery-ui.js" type="text/javascript"></script>

<script language="javascript" src="js/jquery-2.1.3.js"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#show").click(function() {
			$("#hide").slideToggle();
		});
		$("#mytable").dataTable();
		$('#dataTables-example').DataTable({
			responsive : true
		});
	});
</script>

</head>
<body>
	<c:if test="${loginSession == null}"><jsp:forward
			page="/login.jsp" /></c:if>
	<div id="page-top-outer">

		<div id="page-center" style="background-color: white;">

			<!-- start logo -->
			<div id="logo" style="padding-left: 50px">
				<a href="home.html"><img src="images/logo.png" width="229"
					height="74" alt="" /></a>
			</div>
		</div>
	</div>
	<div id="manu_main">
		<ul>

			<li><a href="home.html">Home</a></li>
			<li><a href="getCustomerProfile.html">Change Information</a></li>
			<li><a href="changePassword.html">Change Password</a></li>
			<li><a href="addNewTransaction.html">Transaction Management</a></li>
			<li><a href="getCustomerProfile.html">Welcome <span
					style="color: blue;"><b><u>${loginSession}</u></b></span></a></li>
		</ul>

	</div>

	<div id="content-outer">
		<!-- start content -->
		<div id="content">

			<!--  start page-heading -->
			<div id="page-heading">
				<h1>Transaction Management</h1>


			</div>
			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowleft.jpg" width="20" height="300"
						alt="" /></th>
					<th class="topleft"></th>
					<td id="tbl-border-top">&nbsp;</td>
					<th class="topright"></th>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowright.jpg" width="20" height="300"
						alt="" /></th>
				</tr>
				<tr>

					<td id="tbl-border-left"></td>
					<td>
						<div id="content-table-inner">

							<div style="margin: 10px; padding: 5px;" id="hide">
								<div id="content_left">
									<h1>To Target Account</h1>
									<div id="content-table-inner" style="padding-left: 35px;">
										<table border="0" width="100%" cellpadding="0" cellspacing="0">
											<tr valign="top">
												<td>
													<form action="TargetAccountTransaction.html" method="post">

														<table border="0" cellpadding="0" cellspacing="0"
															id="id-form">
															<tr>
																<th valign="top">Account Number:</th>
																<td><select class="css-input" id="accountType"
																	name="accountNumber">
																		<c:forEach var="account" items="${ listAccount}">
																			<c:if test="${account.accountName!=null }">
																				<option value="${account.accountNumber }">
																					${account.accountNumber }</option>
																			</c:if>
																		</c:forEach>
																</select></td>
																<td></td>
															</tr>
															<tr>
																<th valign="top">Target Account</th>
																<td><select class="css-input"
																	id="selectAccountType" name="accountTargetNumber">
																		<c:forEach var="targetAccount"
																			items="${listTargetAccount }">
																			<option value="${targetAccount.accountNumber }">${targetAccount.accountOwner }</option>
																		</c:forEach>
																</select></td>
															</tr>
															<tr>
																<th valign="top">Amount:</th>
																<td><input type="text" class="css-input"
																	name="amount" /></td>

															</tr>
															<tr>
																<td></td>
																<td><input type="submit" class="myButton"
																	value="Submit" id="transferMoneyAcc" /></td>
																<td></td>
															</tr>
														</table>
													</form>
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div id="content_right">
									<h1>To Normal Account</h1>
									<div id="content-table-inner" style="padding-left: 35px;">
										<table border="0" width="100%" cellpadding="0" cellspacing="0">
											<tr valign="top">
												<td>
													<form action="normalAccountTransaction.html" method="post">
														<table border="0" cellpadding="0" cellspacing="0"
															id="id-form">
															<tr>
																<th valign="top" width="100px">Account Number:</th>
																<td><select class="css-input"
																	id="selectAccountType" name="accountNumber">
																		<c:forEach var="acc" items="${listAccount }">
																			<c:if test="${acc.accountName != null}">
																				<option value="${acc.accountNumber }">${acc.accountNumber }</option>
																			</c:if>
																		</c:forEach>
																</select></td>
																<td></td>
															</tr>
															<tr>
																<th valign="top">Receive Account Number:</th>
																<td><input type="text" class="css-input"
																	name="accountTargetNumber" /></td>
															</tr>
															<tr>
																<th valign="top">Receive Account Name:</th>
																<td><input type="text" class="css-input"
																	name="accountTargetName" /></td>
															</tr>
															<tr>
																<th valign="top">Receive Account Bank:</th>
																<td><input type="text" class="css-input"
																	name="accountTargetBank" /></td>
															</tr>
															<tr>
																<th valign="top">Receive Account Bank Branch:</th>
																<td><input type="text" class="css-input"
																	name="accountTargetBranch" /></td>
															</tr>
															<tr>
																<th valign="top">Amount:</th>
																<td><input type="text" class="css-input"
																	name="amount" /></td>
															</tr>
															<tr>
																<td></td>
																<td><input type="submit" class="myButton"
																	value="Submit" id="transferMoneyAcc" /></td>
																<td></td>
															</tr>
														</table>
													</form>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<div id="show">
								<b>Transaction Management</b>
							</div>
							<div>
								<h1 style="margin: 10px;">
									<span style="color: red;"> ${message }</span>
								</h1>
							</div>
							<table class="mytable1" id="dataTables-example">
								<thead>
									<tr>
										<th>Transaction ID</th>
										<th>From Account (Name)</th>
										<th>Receive Account</th>
										<th>Receive Bank</th>
										<th>Receive Branch</th>
										<th>Amount</th>
										<th>Date</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="transaction" items="${listTransaction}">

										<tr>
											<td>${transaction.transactionID}</td>
											<td>${transaction.sourceAccount}</td>
											<td>${transaction.targetAccount}</td>
											<td>${transaction.targetBank}</td>
											<td>${transaction.targetBranch}</td>
											<td>${transaction.amountNumber}</td>
											<td>${transaction.date}</td>

										</tr>

									</c:forEach>
								</tbody>
							</table>
						</div>
					</td>
					<td id="tbl-border-right"></td>
				</tr>
				<tr>
					<th class="sized bottomleft"></th>
					<td id="tbl-border-bottom">&nbsp;</td>
					<th class="sized bottomright"></th>
				</tr>
			</table>
			<br />
		</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div class="clear">&nbsp;</div>

	<!-- start footer -->
	<div id="footer">
		<!--  start footer-left -->
		<div id="footer-left">
			&copy; Copyright 2014 DAOnJPA| Java Fresher Training Program. <span
				id="spanYear"></span> <a href="http://www.csc.com" target="_blank">www.csc.com</a>
		</div>
		<!--  end footer-left -->
		<div class="clear">&nbsp;</div>
	</div>
</body>
</html>